<template>
    <div>
        <Card style="margin-top:20px;" v-for="(item, i) in detail" :key="i" class="custom">
            <p slot="title" class="title">
                <Icon type="md-apps"></Icon>
                <Input v-model="item.title" placeholder="标题"/>
            </p>
            <Button slot="extra" @click="addItem(i)" type="primary" shape="circle" icon="md-add" style="margin-right:10px;"></Button>
            <Button slot="extra" @click="remove(i)" type="error" shape="circle" icon="md-close"></Button>
            <Row v-for="(r, k) in item.data" :key="k" :gutter="20" style="margin-bottom: 12px;">
                <Col span="3" style="text-align:right;">
                    属性名称：
                </Col>
                <Col span="6">
                    <Input v-model="r.key" placeholder="例如：颜色" />
                </Col>
                <Col span="3" style="text-align:right;">
                    属性值：
                </Col>
                <Col span="6">
                    <Input v-model="r.value" placeholder="例如：血红" />
                </Col>
                <Col span="3">
                    <Icon @click="delItem(i, k)" type="ios-close-circle" :size="24" style="color:#d00;"/>
                </Col>
            </Row>
        </Card>
    </div>
</template>

<script>
    export default {
        props: ['detail'],
        data() {
            return {
                
            }
        },
        created(){
            
        },
        methods: {
            //删除段落
            remove(i){
                this.detail.splice(i, 1);
            },
            //添加明细
            addItem(i){
                this.detail[i].data.push({});
            },
            //删除明细
            delItem(i, k){
                this.detail[i].data.splice(k, 1);
            },
        }
    }
</script>
<style>
.custom p.title{height:33px!important;line-height: 33px!important;}
.custom p.title .ivu-input-wrapper{width:20%;}
.custom .title .ivu-icon{position:relative;height:28px;line-height:28px;}
.custom .ivu-card-head{padding:7px 16px;}
.custom .ivu-card-extra{top: 7px;}
</style>
